<template>
    <view>
        <view class="container">
            <view class="textContainer">
                <text class="textStyle">{{ text }}</text>
            </view>
        </view>

        <!-- parse <template is="footerWx" :data="...tabBar"></template> -->
        <block name="footerWx">
            <view class="we7-bottom" :style="'background-color:' + backgroundColor + ';border-color:' + borderStyle" v-if="list">
                <block v-for="(item, index) in list" :key="index">
                    <view class="we7-bottom-item" hoverClass="active" v-if="item.pageUrl == '/' + thisurl">
                        <view @tap="footerRedirect" :data-jumpdata="item.jumpData" :data-pagepath="item.pagePath" :data-type="item.type" :data-url="item.pagePath">
                            <image
                                class="item-img"
                                :data-jumpdata="item.jumpData"
                                :data-pagepath="item.pagePath"
                                :data-type="item.type"
                                :data-url="item.pagePath"
                                mode="widthFix"
                                :src="item.selectedIconPath"
                            ></image>
                            <view
                                class="item-text"
                                :data-jumpdata="item.jumpData"
                                :data-pagepath="item.pagePath"
                                :data-type="item.type"
                                :data-url="item.pagePath"
                                :style="'color: ' + selectedColor + ';'"
                            >
                                {{ item.text }}
                            </view>
                        </view>
                    </view>

                    <view class="we7-bottom-item" hoverClass="active" v-else>
                        <view @tap="footerRedirect" :data-jumpdata="item.jumpData" :data-pagepath="item.pagePath" :data-type="item.type" :data-url="item.pagePath">
                            <image
                                class="item-img"
                                :data-jumpdata="item.jumpData"
                                :data-pagepath="item.pagePath"
                                :data-type="item.type"
                                :data-url="item.pagePath"
                                mode="widthFix"
                                :src="item.iconPath"
                            ></image>
                            <view
                                class="item-text"
                                :data-jumpdata="item.jumpData"
                                :data-pagepath="item.pagePath"
                                :data-type="item.type"
                                :data-url="item.pagePath"
                                :style="'color: ' + color"
                            >
                                {{ item.text }}
                            </view>
                        </view>
                    </view>
                </block>
            </view>
            <view class="we7-bottom-placeholder"></view>
        </block>
    </view>
</template>

<script>
var app = getApp();
export default {
    data() {
        return {
            text: '微擎我的',
            backgroundColor: '',
            borderStyle: '',
            list: [],
            thisurl: '',
            selectedColor: '',
            color: ''
        };
    },
    onLoad: function (o) {
        app.globalData.util.footer(this);
    },
    onReady: function () {},
    onShow: function () {},
    onHide: function () {},
    onUnload: function () {},
    methods: {
        footerRedirect() {
            console.log('占位：函数 footerRedirect 未声明');
        }
    }
};
</script>
<style>
@import './index.css';
</style>
